/**
 * 自定义弹窗组件
 * 仿照Element UI的Dialog组件实现alert和confirm功能
 */
(function() {
    // 创建命名空间
    window.CustomDialog = {};
    
    // 创建DOM元素
    function createDialogElement(options) {
        const overlay = document.createElement('div');
        overlay.className = 'custom-dialog-overlay is-hidden';
        
        const dialog = document.createElement('div');
        dialog.className = 'custom-dialog is-hidden';
        
        // 创建头部
        const header = document.createElement('div');
        header.className = 'custom-dialog__header';
        
        const title = document.createElement('span');
        title.className = 'title';
        title.textContent = options.title || '提示';
        
        const closeBtn = document.createElement('span');
        closeBtn.className = 'close';
        closeBtn.innerHTML = '×';
        closeBtn.addEventListener('click', () => {
            if (options.type === 'confirm' && typeof options.cancelCallback === 'function') {
                options.cancelCallback();
            }
            closeDialog(overlay, dialog);
        });
        
        header.appendChild(title);
        header.appendChild(closeBtn);
        
        // 创建内容
        const body = document.createElement('div');
        body.className = 'custom-dialog__body';
        
        if (options.type) {
            body.className += ' with-icon';
            
            const icon = document.createElement('div');
            icon.className = 'icon';
            
            switch (options.type) {
                case 'success':
                    icon.className += ' success';
                    icon.innerHTML = '✓';
                    break;
                case 'warning':
                    icon.className += ' warning';
                    icon.innerHTML = '⚠';
                    break;
                case 'error':
                    icon.className += ' error';
                    icon.innerHTML = '✕';
                    break;
                default:
                    icon.className += ' info';
                    icon.innerHTML = 'ℹ';
            }
            
            const content = document.createElement('div');
            content.className = 'content';
            content.innerHTML = options.message || '';
            
            body.appendChild(icon);
            body.appendChild(content);
        } else {
            body.innerHTML = options.message || '';
        }
        
        // 创建底部
        const footer = document.createElement('div');
        footer.className = 'custom-dialog__footer';
        
        if (options.type === 'confirm') {
            const cancelBtn = document.createElement('button');
            cancelBtn.className = 'btn';
            cancelBtn.textContent = options.cancelButtonText || '取消';
            cancelBtn.addEventListener('click', () => {
                if (typeof options.cancelCallback === 'function') {
                    options.cancelCallback();
                }
                closeDialog(overlay, dialog);
            });
            
            const confirmBtn = document.createElement('button');
            confirmBtn.className = 'btn primary';
            confirmBtn.textContent = options.confirmButtonText || '确定';
            confirmBtn.addEventListener('click', () => {
                if (typeof options.confirmCallback === 'function') {
                    options.confirmCallback();
                }
                closeDialog(overlay, dialog);
            });
            
            footer.appendChild(cancelBtn);
            footer.appendChild(confirmBtn);
        } else {
            const confirmBtn = document.createElement('button');
            confirmBtn.className = 'btn primary';
            confirmBtn.textContent = options.confirmButtonText || '确定';
            confirmBtn.addEventListener('click', () => {
                if (typeof options.confirmCallback === 'function') {
                    options.confirmCallback();
                }
                closeDialog(overlay, dialog);
            });
            
            footer.appendChild(confirmBtn);
        }
        
        // 组装弹窗
        dialog.appendChild(header);
        dialog.appendChild(body);
        dialog.appendChild(footer);
        overlay.appendChild(dialog);
        
        return overlay;
    }
    
    // 打开弹窗
    function openDialog(overlay, dialog) {
        document.body.appendChild(overlay);
        
        // 强制回流
        void overlay.offsetWidth;
        
        overlay.classList.remove('is-hidden');
        dialog.classList.remove('is-hidden');
        
        // 禁止背景滚动
        document.body.style.overflow = 'hidden';
    }
    
    // 关闭弹窗
    function closeDialog(overlay, dialog) {
        dialog.classList.add('is-hidden');
        overlay.classList.add('is-hidden');
        
        setTimeout(() => {
            if (overlay.parentNode) {
                overlay.parentNode.removeChild(overlay);
            }
            // 恢复背景滚动
            document.body.style.overflow = '';
        }, 300);
    }
    
    /**
     * 显示警告框
     * @param {Object|String} options 配置项或消息文本
     * @param {String} options.title 标题
     * @param {String} options.message 消息内容
     * @param {String} options.type 类型：info, success, warning, error
     * @param {String} options.confirmButtonText 确认按钮文本
     * @param {Function} options.confirmCallback 确认回调
     */
    CustomDialog.alert = function(options) {
        if (typeof options === 'string') {
            options = {
                message: options
            };
        }
        
        options.type = options.type || 'info';
        
        const dialogElement = createDialogElement(options);
        const dialog = dialogElement.querySelector('.custom-dialog');
        
        openDialog(dialogElement, dialog);
        
        return {
            close: function() {
                closeDialog(dialogElement, dialog);
            }
        };
    };
    
    /**
     * 显示确认框
     * @param {Object|String} options 配置项或消息文本
     * @param {String} options.title 标题
     * @param {String} options.message 消息内容
     * @param {String} options.type 类型：info, success, warning, error
     * @param {String} options.confirmButtonText 确认按钮文本
     * @param {String} options.cancelButtonText 取消按钮文本
     * @param {Function} options.confirmCallback 确认回调
     * @param {Function} options.cancelCallback 取消回调
     */
    CustomDialog.confirm = function(options) {
        if (typeof options === 'string') {
            options = {
                message: options
            };
        }
        
        options.type = 'confirm';
        
        const dialogElement = createDialogElement(options);
        const dialog = dialogElement.querySelector('.custom-dialog');
        
        openDialog(dialogElement, dialog);
        
        return {
            close: function() {
                closeDialog(dialogElement, dialog);
            }
        };
    };
    
    // 快捷方法
    CustomDialog.success = function(message, title, callback) {
        return CustomDialog.alert({
            type: 'success',
            title: title || '成功',
            message: message,
            confirmCallback: callback
        });
    };
    
    CustomDialog.warning = function(message, title, callback) {
        return CustomDialog.alert({
            type: 'warning',
            title: title || '警告',
            message: message,
            confirmCallback: callback
        });
    };
    
    CustomDialog.error = function(message, title, callback) {
        return CustomDialog.alert({
            type: 'error',
            title: title || '错误',
            message: message,
            confirmCallback: callback
        });
    };
    
    CustomDialog.info = function(message, title, callback) {
        return CustomDialog.alert({
            type: 'info',
            title: title || '提示',
            message: message,
            confirmCallback: callback
        });
    };
})();